﻿<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<jsp:useBean id="code" scope="page" class="com.util.CheckCode" />
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黄梅戏方言语言词典系统 - 登录</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            background: url('images/loginimage.png') no-repeat center center fixed;
            background-size: cover;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .login-container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            padding: 40px;
            width: 100%;
            max-width: 450px;
            animation: fadeInUp 0.6s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .login-header h2 {
            color: #333;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .login-header p {
            color: #666;
            font-size: 14px;
        }

        .form-floating {
            margin-bottom: 20px;
        }

        .form-control {
            border-radius: 10px;
            border: 2px solid #e9ecef;
            padding: 12px 15px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

        .btn-login {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 10px;
            padding: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
            width: 100%;
            margin-bottom: 15px;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .btn-register {
            background: #28a745;
            border: none;
            border-radius: 10px;
            padding: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
            width: 100%;
        }

        .btn-register:hover {
            background: #218838;
            transform: translateY(-2px);
        }

        .captcha-container {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .captcha-input {
            flex: 1;
        }

        .captcha-image {
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .captcha-image:hover {
            transform: scale(1.05);
        }

        .alert {
            border-radius: 10px;
            border: none;
        }

        .input-group-text {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-right: none;
        }

        .form-select {
            border-radius: 10px;
            border: 2px solid #e9ecef;
        }
    </style>
</head>
<body>
<div class="login-container">
    <div class="login-header">
        <h2><i class="bi bi-book"></i> 方言词典系统</h2>
        <p>黄梅戏方言语言词典平台</p>
    </div>

    <form name="f11" method="post" action="hsgloginyanzheng.jsp" id="loginForm">
        <div class="form-floating">
            <input type="text" class="form-control" id="username" name="username" placeholder="用户名" required>
            <label for="username"><i class="bi bi-person"></i> 用户名</label>
        </div>

        <div class="form-floating">
            <input type="password" class="form-control" id="password" name="pwd" placeholder="密码" required>
            <label for="password"><i class="bi bi-lock"></i> 密码</label>
        </div>

        <div class="form-floating">
            <select class="form-select" id="cx" name="cx">
                <option value="管理员">管理员</option>
                <option value="用户">用户</option>
            </select>
            <label for="cx"><i class="bi bi-shield"></i> 用户类型</label>
        </div>

        <div class="form-floating">
            <div class="captcha-container">
                <div class="captcha-input">
                    <input type="text" class="form-control" id="pagerandom" name="pagerandom" placeholder="验证码" required>
                </div>
                <img src="image.jsp" id="randImage" class="captcha-image" alt="验证码" onclick="loadimage()" style="height: 50px;">
            </div>
        </div>

        <button type="submit" class="btn btn-primary btn-login" onclick="return hsgchecklogin()">
            <i class="bi bi-box-arrow-in-right"></i> 登录
        </button>

        <button type="button" class="btn btn-success btn-register" onclick="location.href='yonghuxinxi_add.jsp'">
            <i class="bi bi-person-plus"></i> 用户注册
        </button>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function hsgchecklogin() {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const captcha = document.getElementById('pagerandom').value;

        if (!username || !password || !captcha) {
            alert('请填写完整信息');
            return false;
        }
        return true;
    }

    function loadimage() {
        document.getElementById("randImage").src = "image.jsp?" + Math.random();
    }

    // 添加输入框焦点效果
    document.querySelectorAll('.form-control, .form-select').forEach(input => {
        input.addEventListener('focus', function() {
            this.parentElement.classList.add('focused');
        });

        input.addEventListener('blur', function() {
            if (!this.value) {
                this.parentElement.classList.remove('focused');
            }
        });
    });

    // 表单提交动画
    document.getElementById('loginForm').addEventListener('submit', function(e) {
        const btn = document.querySelector('.btn-login');
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>登录中...';
        btn.disabled = true;
    });
</script>
</body>
</html>